<template>
	<div>
    <div class="right-float">
      <ul class="right-float1">
        <li class="transition-ease delay" 
          :class="{'qr': rightList.type == 'QR'}" 
          v-for="(rightList, index) in rightLists"
          :key="index" 
          @click="goJump(rightList)">
          <dd class="iconfont iconstyle" :class="rightList.image"></dd>
          <div class="right-content transition-ease" v-show="!rightList.type" v-text="rightList.name"></div>
          <div class="qr-code" v-if="rightList.type == 'QR'">
            <img src="../../assets/qrcode.png" alt="二维码">
            <h4>下载好下单APP</h4>
        </div>
        </li>
        <li class="img-right" @click="Top"></li>
      </ul>
    </div>
	</div>
</template>
<script>
  export default {
    data() {
      return {
        rightLists: [
          {'name': '个人中心', 'image': 'ico-wode', 'url': '/my/order'},
          {'name': '购物车', 'image': 'ico-gouwuche', 'url': '/cart'},
          {'name': '我的消息', 'image': 'ico-xiaoxi', 'url': '', tag: 'message'},
          {'name': '我的收藏', 'image': 'ico-shoucang', 'url': '/my/collectionShop'},
          {'name': '我的浏览', 'image': 'ico-lishizuji', 'url': '/my/tracks'},
          {'name': '二维码', 'image': 'ico-erweima', 'url': '', 'type': 'QR'}
        ]
      }
    },
    methods: {
      Top() {
        // 让页面跳转到顶部
        window.scroll(0, 0)
      },
      goJump(options) {
        const _this = this
        if (options.url) {
          this.$router.push(options.url)
        } else if (options.tag === 'message') {
          if (!this.$store.getters.token) {
            this.$toast('亲，请先登录', () => {
              this.$router.push('/login')
            })
            return
          }
          this.$store.dispatch('fetchUserRole', {
            token: this.$store.getters.token,
            callback(role) {
              _this.$store.commit('showJIMVisible')
              // if (role != 2) {
              //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
              // } else {
              //   _this.$store.commit('showJIMVisible')
              // }
            }
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .iconstyle {
    font-size: 20px;
    text-align: center;
    padding-top: 6px;
    color: #ffffff;
  }
  .right-float {
    background-color: #555555;
    width: 5px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    height: 100%;
  }
  .right-float1 {
    cursor: pointer;
    position: relative;
    right: 31px;
    top: calc(50vh - 110px);
    
    .qr:hover {
      .qr-code {
        display: block;
        animation-name: slideInRight1;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
      }
    }

    .qr-code {
      background-color: #FFFFFF;
      box-shadow: 0px 0px 6px 0px;
      display: none;
      margin-left: 34px;
      width: 130px;
      height: 156px;
      position: absolute;
      right: -140px;
      padding: 20px;
      bottom: 0px;
      right: 40px;

      &:after {
        border-left: 8px solid white;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        content: "";
        display: block;
        position: absolute;
        bottom: 10px;
        right: -8px;
      }
      
      img {
        width: 88px;
        height: 88px;
      }

      h4 {
        color: #fb309f;
        font-size: 12px;
        margin-top: 16px;
      }
    }
  }
  .right-float1 > li {
    background-color: #555555;
    background-position: center center;
    border-radius: 2px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
    position: relative;
  }
  .right-content {
    background-color: #757575;
    color: #fff;
    width: 108px;
    height: 36px;
    line-height: 36px;
    position: absolute;
    text-align: center;
    right: -140px;
    opacity: 0;
    margin-top: -30px;

    &:after {
      border-left: 8px solid #757575;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      content: "";
      display: block;
      position: absolute;
      top: 10px;
      right: -8px;
    }
  }
  .right-float1 > li:hover {
    background-color: #f00384;
    display: block;

    .right-content {
      animation-name: slideInRight;
      animation-duration: 600ms;
      animation-fill-mode: forwards;
    }
  }
  .imgWith {
    width: 32px;
    height: 32px;
    padding: 6px 0 0 6px;
  }
  .img-right {
    position: fixed !important;
    bottom: 50px;
    background: url('icon_top.png') no-repeat;
    width: 36px;
    height: 36px;
  }
  @keyframes slideInRight {
    from {
      transform: translateX(-230px);
      opacity: 0;
    }
    to {
      transform: translateX(-176px);
      opacity: 1;
    }
  }
  @keyframes slideInRight1 {
    from {
      transform: translateX(-20px);
      opacity: 0;
    }
    to {
      transform: translateX(-0px);
      opacity: 1;
    }
  }
</style>